<template>
	<view class="homebox">
		<!-- swiper -->
		<view class="swposi">
			<!-- 顶部导航 -->
			<view class="tophead_box">
				<view class="tophead">
					<view id="tapView2" :ref="'tapView2'" @tap="addupicon" class="top_item">
						<uni-icons color="#000000" type="bars" size="30"></uni-icons>
					</view>
					<view id="tapView1" :ref="'tapView1'" @tap="addtap" class="top_item">
						<uni-icons color="#000000" type="plusempty" size="30"></uni-icons>
					</view>
				</view>
			</view>
			<view class="sw">
				<u-swiper height="240" interval="5000" radius="0" :list="bannerArr" keyName="imgSrc"></u-swiper>
			</view>
			<view class="text">
				<view class="">
					{{userObj.userName}}
				</view>
				<view class="">
					{{deptName}}
				</view>
			</view>
			<view class="bar">
				<u-notice-bar speed="50" :text="text1" color="#ffffff" bgColor="rgba(0,0,0,0.2)"></u-notice-bar>
			</view>
		</view>
		<!-- 标签 -->
		<u-sticky offsetTop="0">
			<view class="tab_box">
				<u-tabs :list="list1" @click="tabFn" lineColor="#4b8aff" :activeStyle="{
			    color: '#4b8aff',
			    transform: 'scale(1.7)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1.6)'
			}" itemStyle="padding-left: 20px; padding-right: 20px; height: 50px;"></u-tabs>
			</view>
		</u-sticky>
		<!-- 标签内容 -->
		<view class="zhanian">
		<!-- 站点下拉 -->
		<mescroll-body @init="mescrollInit" @up="upCallback" :down="downOption" @down="downCallback" :up="upOption" :height="100"
			v-if="tabsIf == '站点'">
			<view class="tabs_box">
				<view class="tabs_i" v-for="(i,index) in dataList" :key="index" @click="zhandianShowFn(i)"
					@longpress="longpressFn(i)">
					<image class="img" src="@/static/images/shuiwji.png" mode=""></image>
					<view class="text">
						<view class="">
							{{i.surveyStationName}}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		</view>
		<!-- 站点下拉 -->
		<view class="tabs_monitor" v-if="tabsIf == '监测'">
			<view class="tabs_i" v-for="(i,index) in monitorArr" :key="index" @click="monitorFn(i)">
				<image class="img" :src="i.img" mode=""></image>
				<view class="text">
					<view class="">
						{{i.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- 站点下拉 -->
		<view class="tabs_flow" v-if="tabsIf == '测流'">
			<view class="tabs_i" v-for="(i,index) in flowArr" :key="index" @click="flowFn(i)">
				<image class="img" :src="i.img" mode=""></image>
				<view class="text">
					<view class="">
						{{i.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- 站点下拉 -->
		<view class="tabs_flow" v-if="tabsIf == '调度'">
			<view class="tabs_i" v-for="(i,index) in adjustArr" :key="index">
				<image class="img" :src="i.img" mode=""></image>
				<view class="text">
					<view class="">
						{{i.text}}
					</view>
				</view>
			</view>
		</view>
		<!-- 左下拉弹窗 -->
		<qdxns-pop :height="300" :width="320" :type="popType" ref="addupdatePop">
			<view class="pop_item">
				<view v-for="item in poplatList" :key="item.id" @click="addupdate(item)">
					<view class="item">
						<uni-icons :type="item.icon" size="30" color="#fff"></uni-icons>
						<view class="" style="margin-left: 10rpx;">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</qdxns-pop>
		<!-- 右下拉弹窗 -->
		<qdxns-pop :height="300" :width="300" :type="popType" ref="addqdxPop">
			<view class="pop_item">
				<view v-for="item in popList" :key="item.id" @click="addvideo(item)">
					<view class="item">
						<uni-icons :type="item.icon" size="30" color="#fff"></uni-icons>
						<view class="" style="margin-left: 10rpx;">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</qdxns-pop>
		<!-- 删除弹窗 -->
		<u-modal :show="showmodal" title="是否删除站点" showCancelButton @confirm="confirmFn" @cancel="cancelFn"></u-modal>
		<!-- 版本弹窗 -->
		<ua-pop ref="uniPop" />
		<!-- 更新 -->
		<wrap-version-update ref="updateref" :auto="false" :loading="false" id="492029430505541" @finish="landleFinish"
			@check="landlecheck"></wrap-version-update>
		<!-- 更新 -->
		<view class="" style="height: 50rpx;">

		</view>
	</view>
</template>

<script>
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/beibei/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import qdxnsPop from '@/components/qdxns-popup/qdxns-popup.vue';
	import {
		getElSize
	} from '@/common/component.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			qdxnsPop,
			MescrollBodyDiy
		},
		data() {
			return {
				showmodal: false, //删除站点
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 2,
					empty: {
						tip: '暂无相关数据'
					}
				},
				downOption: {},
				dataList: [], //上拉加载
				popType: 'zoom',
				poplatList: [{
						name: '我的账号',
						icon: 'person'
					},
					{
						name: '系统设置',
						icon: 'gear'
					},
					{
						name: '使用教程',
						icon: 'map'
					},
					{
						name: '技术服务',
						icon: 'medal'
					},
					{
						name: '常见问题',
						icon: 'chat'
					},
					{
						name: '免责声明',
						icon: 'calendar'
					},
					{
						name: '版本升级',
						icon: 'info'
					},
					{
						name: '关于我们',
						icon: 'vip'
					}
				],
				popList: [{
					name: '添加站点',
					icon: 'wallet'
				}, {
					name: '添加设备',
					icon: 'scan'
				}],
				list1: [{
					name: '站点',
				}, {
					name: '监测',
				}, {
					name: '测流'
				}, {
					name: '调度'
				}],
				text1: '水利测控与计量产品开发，水利信息化系统集成，软件开发，技术咨询、技术服务',
				listgrid: [{
						name: '转子式流速仪',
						img: require('../../static/images/a001.png'),
						con: '人工测流的智能化升级'
					},
					{
						name: '多普勒流量水量计',
						img: require('../../static/images/b001.png'),
						con: '自动测量、自动显示'
					},
					{
						name: '一体式多普勒测流船',
						img: require('../../static/images/c001.png'),
						con: '全自动、无人值守、稳定运行'
					},
					{
						name: '智能电子界桩',
						img: require('../../static/images/d001.png'),
						con: 'GPS定位、倾倒报警、集中管理'
					},
				],
				monitorArr: [{
					img: require('@/static/home/moa.png'),
					text: '水位'
				}, {
					img: require('@/static/home/mob.png'),
					text: '流量'
				}, {
					img: require('@/static/home/moc.png'),
					text: '水量'
				}, {
					img: require('@/static/home/mod.png'),
					text: '雨量'
				}, {
					img: require('@/static/home/moe.png'),
					text: '闸位'
				}, {
					img: require('@/static/home/mof.png'),
					text: '墒情'
				}, {
					img: require('@/static/home/mog.png'),
					text: '气象'
				}, {
					img: require('@/static/home/moh.png'),
					text: '水质'
				}],
				flowArr: [{
					img: require('@/static/home/liusu.png'),
					text: '转子式流速仪'
				}, {
					img: require('@/static/home/duopul.png'),
					text: '多普勒测流'
				}, {
					img: require('@/static/home/ssg.png'),
					text: '时差法测流'
				}, {
					img: require('@/static/home/leida.png'),
					text: '雷达波测流'
				}, {
					img: require('@/static/home/peiz.png'),
					text: '配置设备'
				}, {
					img: require('@/static/home/zeliuc.png'),
					text: '智能测流车'
				}],
				adjustArr: [{
					img: require('@/static/home/tiaojb.png'),
					text: '闸门调节'
				}, {
					img: require('@/static/home/tiaoja.png'),
					text: '水量调度'
				}],
				tabsIf: '站点',
				bannerArr: [],
				userObj: {},
				deptName: '',
				projectID: ''
			}
		},
		onLoad() {
			this.bannerFn()
			this.loginFn()
		},

		onShow() {
			setTimeout(()=>{
			this.reloadList()
			},300)
			setTimeout(() => {
				this.userObj = this.vuex_user
				if (uni.$u.test.isEmpty(this.userObj.dept)) {
					this.deptName = '超级管理员'
				} else {
					this.deptName = this.userObj.dept.deptName
				}
			}, 300)
		},

		methods: {
			// 扫码绑定站点
			scanQRCode() {
				uni.scanCode({
					success: (res) => {
						this.codeRes(res.result)
						// 打印扫码结果
						// 在这里可以对扫码结果进行处理
					},
					fail: (res) => {
						console.log(res);
						// 处理扫码失败的情况
					}
				});
			},
			codeRes(id) {
				uni.navigateTo({
					url: '/pages/home/zhanDian/addStationDevice?id=' + id
				});
			},
			// 长按站点
			longpressFn(i) {
				this.projectID = i.id
				this.showmodal = true
			},
			// 删除站点
			confirmFn() {
				this.deleteremove()
				this.showmodal = false
			},
			cancelFn() {
				this.showmodal = false
			},
			// 删除接口
			deleteremove() {
				uni.$u.http.delete('/device/survey_station/remove/' + this.projectID).then(res => {

					if (res.code == 200) {
						this.reloadList()
					} else {
						uni.showToast({
							title: '删除失败',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 站点详情
			zhandianShowFn(i) {
				uni.navigateTo({
					url: '/pages/home/zhanDian/zhanDianShow?id=' + i.id
				});
			},
			// 判断登录状态
			loginFn() {
				if (this.vuex_login != 1) {
					uni.reLaunch({
						url: '/pages/home/login'
					});
				}
			},
			monitorFn(i){
				if (i.text == '雨量') {
					uni.navigateTo({
						url: '/pages/home/measureFun/yuLiangJi/deviceList'
					});
				}
				if (i.text == '水位') {
					uni.navigateTo({
						url: '/pages/home/shuangShuiWei/index'
					});
				}
				if (i.text == '流量') {
					// uni.navigateTo({
					// 	url: '/pages/home/monitorList/flowRate/index'
					// });
					uni.navigateTo({
						url: '/pages/home/monitorList/flowRate/list'
					});
				}
				if (i.text == '水量') {
					// uni.navigateTo({
					// 	url: '/pages/home/monitorList/waterYield/index'
					// });
					uni.navigateTo({
						url: '/pages/home/monitorList/waterYield/list'
					});
				}
				if (i.text == '闸位') {
					uni.navigateTo({
						url: '/pages/home/monitorList/gatePosition/index'
					});
				}
				if (i.text == '墒情') {
					uni.navigateTo({
						url: '/pages/home/monitorList/soil/index'
					});
				}
			},
			// 测量标签
			flowFn(i) {
				if (i.text == '转子式流速仪') {
					uni.navigateTo({
						url: '/pages/home/measureAll/rotaryFlowMeter'
					});
				}
				if (i.text == '配置设备') {
					uni.navigateTo({
						url: '/pages/home/measureAll/configDev'
					});
				}
				if (i.text == '智能测流车') {
					uni.navigateTo({
						url: '/pages/home/measuringflow/ceLiuChe'
					});
				}
			},
			// 顶部点击弹出 自定义 弹出位置
			addupicon(e) {
				this.showPoplat();
			},
			addtap(e) {
				this.showPop();
			},
			// 点击左位置弹窗
			async showPoplat() {
				const size = await getElSize('tapView2', this);
				let windowTop = 0
				const {
					top,
					left
				} = size;
				const y = top - uni.upx2px(140) + windowTop + 100;
				const x = left + (uni.upx2px(750) - uni.upx2px(500)) / 2 - 50;
				this.$refs.addupdatePop.open({
					x,
					y
				}, true);
			},
			// 点击左弹窗内容
			addupdate(e) {
				if (e.name == '版本升级') {
					this.$refs.updateref.check()
				}
				this.$refs.addupdatePop.close();
			},
			// 点击右位置弹窗
			async showPop() {
				const size = await getElSize('tapView1', this);
				let windowTop = 0
				const {
					top,
					left
				} = size;
				const y = top - uni.upx2px(140) + windowTop + 100;
				const x = left + (uni.upx2px(750) - uni.upx2px(500)) / 2 - 50;
				this.$refs.addqdxPop.open({
					x,
					y
				}, true);
			},
			// 点击右弹窗内容
			addvideo(e) {
				if (e.name == '添加站点') {
					uni.navigateTo({
						url: '/pages/home/zhanDian/index'
					});
				}
				if (e.name == '添加设备') {
					this.scanQRCode()
				}
				this.$refs.addqdxPop.close();
			},
			// 标签
			tabFn(e) {
				this.tabsIf = e.name
			},
			celiangFn() {
				uni.navigateTo({
					url: '/pagesA/aproductA/index'
				});
			},
			zhandian() {
				// uni.navigateTo({
				// 	url: '/pages/home/zhanDian/zhandianList'
				// });
				uni.navigateTo({
					url: '/pages/home/zhanDian/zdList'
				});
			},
			measurement(e) {
				uni.navigateTo({
					url: '/pages/home/measureFun/yuLiangJi/index'
				});
			},
			shuangshuiwei(e) {
				uni.navigateTo({
					url: '/pages/home/shuangShuiWei/index'
				});
			},
			// 跳转详情
			btnshow(index) {
				//在起始页面跳转到页面并传递参数
				uni.navigateTo({
					url: '/pages/home/show?id=' + index
				});

			},
			// 轮播图
			bannerFn() {
				uni.$u.http.get('/api/device/app_banner/list').then(res => {
					if (res.code == 200) {
						this.bannerArr = res.rows
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				uni.$u.http.get('/device/survey_station/list', {
					params: {
						"pageSize": pageSize,
						"pageNum": pageNum,
					}
				}).then(res => {
					setTimeout(()=>{
						if (res.code == 200) {
							// 接口返回的当前页数据列表 (数组)
							let curPageData = res.rows;
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							// let totalPage = data.total;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = res.total;
							// 接口返回的是否有下一页 (true/false)
							//设置列表数据
							if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
							this.dataList = this.dataList.concat(curPageData); //追加新数据
						
							//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
							this.mescroll.endBySize(curPageLen, totalSize);
						} else {
							uni.showToast({
								title: '暂无数据',
								duration: 1500
							});
							uni.reLaunch({
								url: '/pages/home/login'
							});
						}
					},200)

				}).catch(err => {
					console.log('err', err);
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},
			// 下拉刷新
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			},
			// msg提示
			handleMsg(data) {
				this.$refs.uniPop.show({
					content: `
			    <div class="aboutme" style="text-align: center;padding:10px;background-color: #ffffff;">
			        <div style="color: #00aa7f; font-size:20px;margin-top:5px;">已是最新版本</div>
			        <div style="color:#999;font-size:16px;font-family:simsun;margin-top:5px;">` + data + `</div>
			    </div>
			`,
					shade: true,
					shadeClose: false,
					time: 2,
					anim: 'fadeIn',
				})
			},
			// 更新
			landlecheck(e) {
				// let nub = this.poplatList.length - 1
				this.showToasttet = '版本号：' + e.version
			},
			landleFinish(e) {
				let con = '版本号：' + e.version
				this.handleMsg(con)
			},
		}
	}
</script>
<style scoped lang="scss">
	// 轮播图
	.swposi {
		position: relative;

		// 顶部导航
		.tophead_box {
			width: 750rpx;
			position: absolute;
			left: 0;
			top: 70rpx;
			// background-color: #cecece;
			z-index: 99;

			.tophead {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 20rpx;
				color: #ffffff;
				z-index: 99;
			}
		}

		.sw {}

		.text {
			color: #ffffff;
			position: absolute;
			top: 140rpx;
			left: 30rpx;
		}

		.bar {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
		}
	}

	// 标签
	.tab_box {
		padding: 40rpx 10rpx 20rpx 10rpx;
		background-color: #fbfcff;
	}

	// 标签内容
	.zhanian {
		.tabs_box {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		
			.tabs_i {
				width: 300rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				text-align: center;
				background-color: #eff3ff;
		
				.img {
					width: 100rpx;
					height: 100rpx;
				}
		
				.text {
					color: #253e78;
					font-size: 40rpx;
		
					.shuj {
						padding: 0 20rpx;
						font-size: 30rpx;
						color: #868686;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}
	}


	// 水情
	.tabs_monitor {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.tabs_i {
			width: 300rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			background-color: #eff3ff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				color: #253e78;
				font-size: 40rpx;
			}
		}
	}

	// 测量
	.tabs_flow {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.tabs_i {
			width: 300rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			background-color: #eff3ff;

			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				color: #253e78;
				font-size: 40rpx;
			}
		}
	}

	// 右上角弹窗
	.pop_item {
		color: #fff;
		padding: 10rpx;
		font-size: 40rpx;
		border-radius: 20rpx;
		background-color: rgba(35, 35, 35, 0.9);

		.item {
			display: flex;
			align-items: center;
			margin: 20rpx 10rpx;
		}

	}

	.bombg {
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #f4f7ff;

		.bombgtop {
			text-align: center;
			font-size: 40rpx;
			color: #000;
			margin: 0 auto;
			width: 400rpx;
			text-align-last: justify;
		}

		.bombgcon {
			width: 600rpx;
			padding: 20rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			border-radius: 20rpx;
			margin-top: 20rpx;
			box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.1);

			background-color: #f4f7ff;
			border: 3rpx solid #ffffff;

			.rbox {
				width: 380rpx;
				font-size: 38rpx;
				color: #2a2a2a;
				padding: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #3460ce;

				// background-color: #5d8d59;
				.text {
					font-size: 25rpx;
					color: #828282;
					line-height: 60rpx;
				}

				.butn {
					font-size: 30rpx;
					padding: 10rpx;
					margin-top: 10rpx;
					text-align: center;
					background-color: #3460ce;
					color: #FFFFFF;
					width: 200rpx;
					border-radius: 50rpx;
				}
			}
		}
	}

	.devlist {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item {
			width: 280rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			text-align: center;
			// display: flex;
			// justify-content: space-around;
			// align-items: center;
			background-color: #eff3ff;

			// box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.2);
			.img {
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				color: #253e78;
				font-size: 50rpx;

				.shuj {
					font-size: 30rpx;
					color: #a1a1a1;
				}
			}
		}
	}

	.ylzlist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;

		.ylzitem {
			width: 630rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: #eff3ff;
			// box-shadow: 0rpx 0rpx 30rpx rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				font-size: 50rpx;
				color: #000000;
			}

			.text1 {
				font-size: 30rpx;
				color: #a1a1a1;
			}
		}
	}
</style>
<style>
	page {
		background-color: #fbfcff;
	}
</style>